<template>
  <div class="container">
    <!-- 筛选数据 -->
    <div class="filters_data">
      <el-row :span="24" type="flex" align="middle">
        <el-col :span="21">
          <el-col :span="7">
            <div class="item">
              <span>标题:</span
              ><el-input placeholder="请输入标题" v-model="title"></el-input>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="item">
              <span>价格:</span><el-input placeholder="请填写价格"></el-input>
            </div>
          </el-col>
          <el-col :span="7">
            <div class="item">
              <span>城市:</span
              ><el-input placeholder="请输入城市名称" v-model="city"></el-input>
            </div>
          </el-col>
        </el-col>
        <el-col :span="3" :pull="3">
          <el-button type="primary" @click="handleSearch"> 搜索 </el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 新增按钮 -->
    <div class="add_travel">
      <el-button @click="$router.push('/travel/addTravel')" type="primary">
        发布景点
      </el-button>
    </div>
    <!-- 表格数据 -->
    <Table
      :loading="loading"
      :tableData="tableData"
      :tableCols="tableCols"
      align="center"
      border
      :tabelOption="tabelOption"
      @click="handleClick"
      val
    >
    </Table>
    <!-- 分页 -->
    <Pagination
      :limit="listQuery"
      :total="total"
      @handleChange="handleChange"
      background
    />
    <!-- 删除对话框 -->
    <Dialog title="删除该旅游景点" align="center" :visible="visible">
      <div slot="content">是否删除该景点</div>
      <div slot="footer">
        <el-button type="info" @click="visible = false">不要删除</el-button>
        <el-button type="danger" @click="handleAffitm">再见</el-button>
      </div>
    </Dialog>
  </div>
</template>
<script>
import Table from "@/components/Table";
import Pagination from "@/components/Pagination";
import Dialog from "@/components/Dialog";
import AddTravel from "./addTravel";
import { all_travel, del_travel } from "@/api/travel_list";
export default {
  props: {},
  components: {
    Table,
    Pagination,
    Dialog,
    AddTravel,
  },
  data() {
    return {
      loading: false,
      tableData: [], // 表格数据
      tableCols: [
        { prop: "id", label: "id", width: "100px" },
        { prop: "title", label: "标题", width: "200px" },
        { prop: "introduce", label: "介绍", width: "350px" },
        { prop: "price", label: "门票", width: "90px" },
        { prop: "collect", label: "收藏", width: "90px" },
        { prop: "likes", label: "点赞", width: "90px" },
        { prop: "city", label: "城市" },
        { prop: "log", label: "经度" },
        { prop: "lat", label: "纬度" },
      ], // 定义表头的数据
      tabelOption: [
        {
          label: "操作",
          oper: [
            { clickFun: "handleEdit", name: "编辑", style: "success" },
            { clickFun: "handleDele", name: "删除", style: "danger" },
          ],
        },
      ], // 按钮名称数据
      total: 0, // 总页数
      listQuery: {
        currentPage: 1,
        pageSize: 10,
      },
      city: "", // 城市名称
      title: "", // 标题
      visible: false,
    };
  },
  methods: {
    // 点击搜索按钮
    handleSearch() {
      // this.tableDatalist()
    },

    // 点击表格按钮
    handleClick(val) {
      val.method == "handleEdit"
        ? this.handleEdit(val.row)
        : this.handleDel(val.row);
    },
    // 点击切换分页
    handleChange(val) {
      this.listQuery = val;
      this.tableDatalist();
    },
    // 获取数据列表
    tableDatalist() {
      this.loading = true;
      let data = {
        pageSize: this.listQuery.pageSize,
        page: this.listQuery.currentPage,
        title: this.title,
        city: this.city,
      };
      all_travel(data).then((res) => {
        if (res.code == 0) {
          this.loading = false;
          this.total = res.count;
          this.tableData = res.data;
        }
      });
    },
    // 点击编辑按钮
    handleEdit(val) {
      this.$store.commit("travel/SET_DETAILS", val);
      this.$router.push({
        path: "/travel/EditTravel",
        query: {
          id: val.id,
        },
      });
    },
    // 点击删除按钮
    handleDel(val) {
      this.visible = true;
      this.isDelte_data = val;
    },
    // 点击确认删除按钮
    handleAffitm() {
      console.log(this.isDelte_data.id);
      del_travel({ id: this.isDelte_data.id }).then((res) => {
        if (res.code == 0) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.visible = false;
          this.tableDatalist();
        }
      });
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  created() {
    this.tableDatalist();
  },
  filters: {},
};
</script>
<style lang="scss">
.add_travel {
  text-align: right;
  margin-bottom: 20px;
}
.filters_data {
  margin-bottom: 20px;
  .item {
    display: flex;
    align-items: center;
    .el-input {
      width: 70%;
      margin-left: 10px;
    }
  }
}
</style>
